<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
      <template #function="{ record }">
        <span> {{ '小程序首页搜索框显示/隐藏' }} </span>
      </template>
    </BasicTable>
    <Modal @register="registerModal"
           @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {
  ActionItem,
  BasicColumn,
  BasicTable,
  EditRecordRow,
  FormSchema,
  useTable,
  TableAction,
} from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { ListApi, UpdateApi } from '/@/api/setCenter/searchSettings';
import { searchBoxStatus } from '/@/assets/dic';
import formatDic from '/@/utils/formatDic';
import { UserItem } from '/@/api/advertising/userModel';
import Modal from './modal.vue';
import { useModal } from '/@/components/Modal';

const columns: BasicColumn[] = [
  {
    title: '内容',
    dataIndex: 'title',
    slots: { customRender: 'function' },
  },
  // {
  //   title: '类别',
  //   dataIndex: 'type',
  //   format: formatDic(ADTypes),
  // },
  // {
  //   title: '排序',
  //   dataIndex: 'sort',
  // },
  {
    title: '状态',
    dataIndex: 'status',
    format: formatDic(searchBoxStatus),
  },
];

const colProps = {
  span: 6,
};
const schemas: FormSchema[] = [];

export default defineComponent({
  name: 'AverageUser',
  components: {
    BasicTable,
    TableAction,
    Modal,
    PageWrapper,
  },
  setup() {
    // const selectedRowKeys = ref<string[]>([]);
    const [registerModal, { openModal }] = useModal();
    const [registerTable, { reload, getSelectRows }] = useTable({
      api: ListApi,
      useSearchForm: false,
      // rowSelection: {
      //   type: 'checkbox',
      // },
      columns,
      formConfig: {
        schemas,
        labelWidth: 100,
      },
      actionColumn: {
        width: 160,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });

    function handleCreate() {
      openModal(true, {
        isUpdate: false,
      });
    }

    function handleSuccess() {
      reload();
    }
    // 改变用户的使用状态
    function handleChangeStatus(record: UserItem) {
      record.status = record.status === 0 ? 1 : 0;
      UpdateApi(record).then((_) => {
        reload();
      });
    }

    function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
      return [
        {
          label: record.status === 0 ? '隐藏' : '显示',
          onClick: handleChangeStatus.bind(null, record as UserItem),
        },
      ];
    }
    return {
      registerTable,
      createActions,
      registerModal,
      handleSuccess,
      handleCreate,
    };
  },
});
</script>
<style lang="less" scoped></style>
